/*变量*/
@dark-gray: #888888;
@gray:#ededee;
@gray-dark:#d6d6d6;
@blue:#4058c5;
@grey: #f6f6f6;
/*混合*/
.block(@w,@h,@bg) when (iscolor(@bg)){
	width: @w;
	height: @h;
	background-color: @bg;
}

.block(@w,@h,@bg) when (isurl(@bg)){
	width: @w;
	height: @h;
	background-image: @bg;
	background-size: cover;
}

.radiusBlock(@w,@h,@bgColor,@radius){
	.block(@w,@h,@bgColor);
	/* Gecko browsers */
	-moz-border-radius: @radius; 
	/* Webkit browsers */
	-webkit-border-radius: @radius; 
	/* W3C syntax - likely to be standard so use for future proofing */
	border-radius:@radius;
}
.radius(@radius){
	/* Gecko browsers */
	-moz-border-radius: @radius; 
	/* Webkit browsers */
	-webkit-border-radius: @radius; 
	/* W3C syntax - likely to be standard so use for future proofing */
	border-radius:@radius;
}
.containTextCenter(@h){
	text-align: center;
	line-height: @h;
}
.shadow(@offx,@offy,@blur-radius,@spread-radius,@color){
	-moz-box-shadow:@offx @offy @blur-radius @spread-radius @color ;              
    -webkit-box-shadow:@offx @offy @blur-radius @spread-radius @color ;           
    box-shadow:@offx @offy @blur-radius @spread-radius @color ;
}
.listBlock{
	padding: 0;
	margin: 0;
	list-style: none;
	li{
		padding: 0 10%;
		@h:36px;
		width: 100%;
		height: @h;
		line-height: @h;
		position: relative;
		a{
			display:inline-block;
		}
	}
}
.button(@w,@h,@bgcolor,@fontcolor){
	/*.radiusBlock(110px,34px,@blue,2px);*/
	.radiusBlock(@w,@h,@bgcolor,2px);
	border-style: none;
	color: @fontcolor;
}
.clearFloatAfter{
	content: '.';
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
}

.nothing {
	text-align: center;
	font-size: 1.5em;
	color: #484848;
}
/*全局*/
p,h2,h3,h4,h5,a,li,span{
	font-family: "黑体";
}
html{
	height: 100%;
}
body{
	min-width: 960px !important;
	background-color: @gray;
	margin: 0;
	padding: 0;
	height:100%;
}
#container{
	min-height:100%;
}
#content{
	width: 80%;
	margin: 80px auto 0 auto;
}
#topBar{
	@topBarH:60px;
	#logo{
		height: 40px;
		margin-left: 10%;
	}
	.block(100%,@topBarH,@blue);
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0px;
	left: 0px;
	line-height: @topBarH;
	p{
		margin: 0 0 0 20px;
		color: #FFF;
		font-family: "黑体";
		font-size: 25px;
	}
	z-index:11;
}
.StudioInfoBox{
	position: relative;
	.block(100%,317px, url('../image/cover.png'));
	text-align: center;
	color: @grey;
	text-shadow: 1px 1px 1px #000;
	.changeCoverBox {
		display: inline-block;
		position: absolute;
		right: 0;
		.block(46px, 46px, url('../image/changeCoverBg.png'));
		img {
			position: absolute;
			width: 23px;
			top: 5px;
			right: 5px;
		}
	}
	.StudioInfoBox_avatar_wrapper{
		height: 80px;
		width: 80px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -40px;
		margin-left: -40px;
		border-radius: 50px;
		overflow: hidden;
		border: 3px solid rgba(255, 255, 255, 0.3);
		img{
			width: 100%;
		}
		.avatar-mask {
			opacity: 0;
			background-image: url('./../image/avatarHover.png');
			background-size: cover;
			width: 75px;
			height: 75px;
			position: absolute;
			margin-top: -75px;

			transition: 0.5s all;
		}

		&:hover {
			.avatar-mask {
				opacity: 1;

				transition: 0.5s all;
			}
		}

	}

	.textBox{
		text-align: center;
		position: relative;
		top: 70%;
	}
	h4{
		font-size: 20px;
		margin: 5px 0 10px 5px;
	}
	p{
		font-size: 16px;
		margin: 5px;
		display: inline-block;
	}
	#logoutBtn{
		.button(110px,auto,@blue,white);
		 vertical-align:middle;
		position: fixed; 
		top: 30px;
		margin-top: -0.5em;
		right: 8%;
		z-index: 12;
	}
}
.tabs{
	.block(100%,52px,#f8f8f8);
	.shadow(0,1px,2px,1px,@gray-dark);
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
		li{
			@h:52px;
			.block(16.6%,@h,#f8f8f8);
			float: left;
			list-style: none;
			text-align: center;
			line-height: @h;
			padding: 0;
		}
		li.active{
			color:@blue;
		}
		li:after{
				background-color: @gray;  
				bottom: 0;  
				content: "";  
				display: block;   
				position: relative;  
				top: -41px;  
				left: 0px;
				width: 1px; 
				height: 30px;
			}
		li:hover{
			cursor: pointer;
		}
	}
}
.uploadAvatarContainer{
	width: 100%;
	.uploadAvatarBody{
		padding: 20px;
		.uploadAvatarInput{
			margin: 0 auto;
			.hide{
				display: none;
			}

		}
		button{
			display: block;
			margin: 20px auto;
		}

	}
}
/*文章*/
#hidden_frame{
	display: none;
}
.ArticlePageContainer{
	width: 100%;
}
.articleActionBar{
	.radiusBlock(100%,60px,white,2px);
	.shadow(0,1px,2px,1px,@gray-dark);
	margin-top: 10px;
	.sortBtn{
		height: 60px;
		width: 100px;
		margin:0;
		float: left;
		line-height: 60px;
		text-align: center;
		cursor: pointer;
		background-image: url("../image/sort.png");
		background-repeat: no-repeat;
		background-position: 70px 28px;
	}
	.sortBtn.active{
		color:@blue;
	}
	.sortBtn:after{
		background-color: @gray;  
		content: "";  
		display: block;   
		position: relative;  
		top: -45px;
		left: 0px;
		width: 1px; 
		height: 30px;
	}
	#manage {
		.sortBtn;
		background-image: url("../image/manage.png");
		background-repeat: no-repeat;
		background-position: 10px 20px;
		background-size: 21px auto;
		float: right;
		color: @blue;
	}
	#writeArticle{
		.sortBtn;
		background-image: url("../image/writeBtn.png");
		background-repeat: no-repeat;
		background-position: 0 18px;
		float: right;
		color: @blue;
	}
}
.article{
		//触发BFC模型，不会高度塌陷。
		float: left;
		//overflow: auto;	//用overflow会导致box-shadow无法正常显示
		margin-top: 10px;
		width: 100%;
		.left-col{
				float: left;
				position: relative;	//用于子元素绝对定位
				width: 10%;
				height: 0;
				padding-bottom: 10%;
				
				.avatarWrapper{
					float: left;
					width: 77%;
					height: 0;
					overflow: hidden;
					padding-bottom: 77%;
					img{
						
						width: 100%;
					}
				}

				.triangle{
					position: absolute;
					right: 0;
					top: 35%;
					width: 0;
					height: 0;
					border-right: 10px solid #FFF;
					border-top: 10px solid transparent;
					border-bottom: 10px solid transparent;
				}
		}
		.right-col{
				float: left;
				width: 90%;
				background-color: #FFF;
				.shadow(0px, 3px, 4px, -2px, #9C9C9C);

				.problem-details{
					word-break:break-all;
					padding: 0 3%;
					h5{
						font: 16px "黑体","宋体",sans-serif;
					}
					h5:first-child{
						color: #3964CF;
						margin-top: 20px;
					}
					h6{
						margin: 0 0 15px 0;
						font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
						color: #8F8F8D;
						white-space: pre;
					}
					.paintings{
						margin-right: -3%;
						img{
							width: 19%;
							margin-right: 1.25%;
						}
						img:last-child{
							margin-right: 0;
						}
					}
					.tags-showAll, {
						width: 100%;
						margin: 17px 0 13px 0;
						height: 20px;
						img{
							width: 17px;
						}
						.tags{
							position: relative;
							top: 2px;
							padding: 0 5px;
							font: 15px "黑体","宋体",sans-serif;
							color: #8F8F8D;
						}
						.showAll, .article-delete, .article-update {
							display: inline-block;
							float: right;
							margin-right: 12px;
							color: #3964CF;
							font: 17px/20px "黑体","宋体",sans-serif;
							cursor: pointer;
						}	
					}
				}
				.problem-comment{
					//overflow: auto;	//触发BFC
					div{
						float: left;
						width: 50%;
						height: 50px;
						text-align: center;
						border-top: 1px solid #CECECB;
						img{
							position: relative;
							top: 13px;
							width: 17px;
						}
						.num{
							position: relative;
							top: 15px;
							padding-left: 3px;
							font: 16px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
							color: #8F8F8D;
						}

					}
					.left-zan{
						border-right: 1px solid #CECECB;
						img{
							cursor: pointer;
						}
					}
				}
		}
}
/*写文章*/
.writeContainer{
	width: 100%;
	height: 530px;
	padding: 20px 20px 40px 20px;
	.writeBody{
		@w:100%;
		.writeInput{
			margin: 0 auto;
			width: @w;
			#writeTitleInput{
				.radiusBlock(100%,51px,#ececec,2px);
				border: 1px solid @gray-dark;
			}
			/*#writeDescription{
				margin-top:10px;
				.radiusBlock(100%,51px,#ececec,2px);
				border: 1px solid @gray-dark;
				height: 320px;
				outline:none;
				resize:none;
			}*/
			.writeLabel{
				display: inline-block;
			}
			.uploadMediaBtn{
				margin-top: 7px;
				margin-right: 5px;
				width: 28px;
				height: 22px;
				float: right;
				z-index: 999;
			}
			.selectedFileName{
				margin-top: 7px;
				margin-right: 5px;
				float:right;
			}
			#uploadImg{
				background: url("../image/insertImg.png");
			}
			#uploadVideo{
				background: url("../image/insertVideo.png");
			}
			form{
				display: none;
			}
		}
		.actionBtns{
			width: @w;
			margin: 20px auto;
			button{
				float: right;
				margin-left:5px;
			}
			#publishBtn{
				.button(110px,34px,@blue,white);
			}
			#saveBtn{
				.button(110px,34px,#dfdfdf,#767676);
				border: solid 1px #bfbfbf;
			}
		}
	}
}
/*文章详情*/
.articleDetail{
	.breadcrumb{
		color: @blue;
		cursor: pointer;
	}
	.articles{
		word-break:break-all;
		//触发BFC模型，不会高度塌陷。
		float: left;
		width: 100%;
		margin-top: 25px;
		padding: 0 3%;
		background-color: #FFF;

		h5{
			margin: 20px 0 5px 0;
			font: bold 16px "微软雅黑", "黑体","宋体",sans-serif;
			color: #445bc8;
		}
		h6{
			margin: 5px 0 13px 0;
			font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
			color: #959595;
			white-space: pre;
		}
		p{	//content
			color: #2e2e2e;
			font: 15px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
			margin-bottom: 15px;
		}
		.paintings{
			margin-right: -3%;
			img{
				width: 32.7%;
				padding-right: 3%;
			}
		}
		.tags-showAll{
			margin: 17px 0 13px 0;
			height: 20px;
			img{
				width: 17px;
			}
			.tags{
				position: relative;
				top: 2px;
				padding: 0 5px;
				font: 15px "黑体","宋体",sans-serif;
				color: #959595;
				&.viewNum{
					padding: 0;
				}
			}
		}
			
	}
}

/*资料编辑*/
.iconButton(){
	background-repeat: no-repeat;
	background-position: 0 8px;
	float: right;
	color: @blue;
	height: 40px;
	width: 70px;
	margin:0;
	float: right;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
}
.studioDetailBox{
	position: relative;
	.radiusBlock(100%,100%,white,2px);
	.shadow(0,1px,2px,1px,@gray-dark);
	margin-top: 10px;
	padding: 20px;
	#selectCityBtn{
		color: @blue;
		cursor: pointer;
	}
	.textInfo{
		font-weight: normal;
	}
	span{
		font-weight: bold;
	}
	#editInfoBtn{
		.iconButton();
		background-image: url("../image/writeBtn.png");
		position: absolute;
		top: 0px;
		right: 0px;
	}
	input{
		width: 80%;
	}
	textarea{
		width: 80%;
	}

}
.EditInfoBox {
	position: relative;
	.radiusBlock(100%,100%,white,2px);
	.shadow(0,1px,2px,1px,@gray-dark);
	margin-top: 10px;
	padding: 20px;
	.EditInfoBoxHeader{
		h4{
			display: inline-block;
		}
		.editInfoBtn{
			.iconButton();
			background-image: url("../image/writeBtn.png");
			float: right;
		}
		margin-bottom:10px;
	}
}

.MediaInfoBox{
	position: relative;
	.radiusBlock(100%,100%,white,2px);
	.shadow(0,1px,2px,1px,@gray-dark);
	margin-top: 10px;
	padding: 20px;
	.imageItemWrapper{
		/*display: inline;*/
		float: left;
		position: relative;
		margin-right: 0.8%;
		width: 16%;
		height:0;
		padding-bottom:16%;
		overflow: hidden;
		text-align: center;
		.imageItem{
			max-width: 100%;
			max-height: 150px;
		}
		.playIcon{
			height: 30%;
			margin:35%; 
			position: absolute;
			top: 0px;
			left: 0px;
		    z-index: 10;
		}
		.deleteIcon{
			width: 10%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 10;

		}
	}

	.imageItemWrapper:last-child{
		margin-right: 0;
	}
	.MediaInfoBoxHeader{
		h4{
			display: inline-block;
		}
		#editMediaInfoBtn{
			.iconButton();
			background-image: url("../image/writeBtn.png");
			float: right;
		}
		#uploadMediaInfoBtn{
			.iconButton();
			padding-left: 10px;
			background-image: url("../image/uploadBtn.png");
			float: right;
		}
		margin-bottom:10px;
	}

	
}
.MediaInfoBox:after{
	.clearFloatAfter;
}

.cancel {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	right: -8em;
	background-image: url('./../image/cancel-1.png');
	background-size: cover;

	&:hover {
		background-image: url('./../image/cancel-hover.png');
	}
}
.uploadWorkContainer{
	width: 100%;
	.uploadWorkBody{
		padding: 20px;

		.uploadWorkInput{
			margin: 0 auto;
			.hide{
				display: none;
			}

		}
		button{
			display: block;
			margin: 20px auto;
		}

	}
}
.uploadEnvironmentContainer{
	width: 100%;
	.uploadEnvironmentBody{
		padding: 20px;
		.uploadEnvironmentInput{
			margin: 0 auto;
			.hide{
				display: none;
			}

		}
		button{
			display: block;
			margin: 20px auto;
		}

	}
}
.uploadVideoContainer{
	width: 100%;
	.uploadVideoBody{
		padding: 20px;
		#VideoTitleInput{
			.radiusBlock(100%,40px,@gray,5px);
			border: solid 1px @gray-dark;
		}
		#VideoDescription{
			.radiusBlock(100%,110px,#ececec,2px);
			border: 1px solid @gray-dark;
			outline:none;
			resize:none;
		}
	}
}
/*学员信息*/
#StudentMsgPage{
	#StudentMsgToolBar{
		.radiusBlock(100%,50px,white,2px);
		.shadow(0,1px,2px,1px,@gray-dark);
		margin: 20px 0 10px 0;
		line-height: 50px;
		.toolBarBtn{
			height: 50px;
			width: 120px;
			float: left;
			cursor: pointer;
			padding: 0 10px;
			text-align: center;
		}
		.toolBarBtn.active{
			color: @blue
		}
		.toolBarBtn:first-child{
			border-right: 1px solid @gray;
		}
	}
	#answerModal{
		.answerContainer{
			padding: 20px;
			#answerTextarea{
				margin-top:10px;
				.radiusBlock(100%,51px,#ececec,2px);
				border: 1px solid @gray-dark;
				height: 320px;
				outline:none;
				resize:none;
			}
		}

	}
	.studentProblem{
			//触发BFC模型，不会高度塌陷。
			float: left;
			//overflow: auto;	//用overflow会导致box-shadow无法正常显示
			margin-top: 10px;
			width: 100%;



			.left-col{
					float: left;
					position: relative;	//用于子元素绝对定位
					width: 10%;
					height: 0;
					padding-bottom: 10%;
					overflow: hidden;
					.avatarWrapper{
						float: left;
						width: 77%;
						height: 0;
						padding-bottom: 77%;
						overflow: hidden;
						img{
							
							width: 100%;
						}
					}
					.triangle{
						position: absolute;
						right: 0;
						top: 35%;
						width: 0;
						height: 0;
						border-right: 10px solid #FFF;
						border-top: 10px solid transparent;
						border-bottom: 10px solid transparent;
					}
			}
			.right-col{
					position: relative;
					float: left;
					width: 90%;
					background-color: #FFF;
					.shadow(0px, 3px, 4px, -2px, #9C9C9C);

					.problem-details{
						word-break:break-all;
						padding: 0 3% 20px 3%;
						h5{
							font: 16px "黑体","宋体",sans-serif;
						}
						h5:first-child{
							color: #3964CF;
							margin-top: 20px;
						}
						h6{
							margin: 0 0 15px 0;
							font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
							color: #8F8F8D;
							white-space: pre;
						}
						.reply{
							position: absolute;
							top: 20px;
							right: 20px;
							color: @blue;
							font-size: 16px;
							cursor: pointer;
						}
						.delete{
							position: absolute;
							top: 20px;
							right: 60px;
							color: @blue;
							font-size: 16px;
							cursor: pointer;
						}
						.paintings{
							margin-right: -3%;
							img{
								width: 19%;
								margin-right: 1.25%;
							}
							img:last-child{
								margin-right: 0;
							}
						}
						.tags-showAll{
							width: 100%;
							margin: 17px 0 13px 0;
							height: 20px;
							img{
								width: 17px;
							}
							.tags{
								position: relative;
								top: 2px;
								padding: 0 5px;
								font: 15px "黑体","宋体",sans-serif;
								color: #8F8F8D;
							}
							.showAll{
								display: inline-block;
								float: right;
								color: #3964CF;
								font: 17px/20px "黑体","宋体",sans-serif;
								cursor: pointer;
							}	
						}
					}
					.problem-comment{
						//overflow: auto;	//触发BFC
						div{
							float: left;
							width: 50%;
							height: 50px;
							text-align: center;
							border-top: 1px solid #CECECB;
							img{
								position: relative;
								top: 13px;
								width: 17px;
							}
							.num{
								position: relative;
								top: 15px;
								padding-left: 3px;
								font: 16px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
								color: #8F8F8D;
							}

						}
						.left-zan{
							border-right: 1px solid #CECECB;
							img{
								cursor: pointer;
							}
						}
					}
			}
	}
}
#StudioCommentPage{
	#StudioCommentToolBar{
		.radiusBlock(100%,50px,white,2px);
		.shadow(0,1px,2px,1px,@gray-dark);
		margin: 20px 0 10px 0;
		line-height: 50px;
		.toolBarBtn{
			height: 50px;
			width: 100px;
			float: left;
			cursor: pointer;
			padding: 0 10px;
		}
		.toolBarBtn.active{
			color: @blue
		}
		.toolBarBtn:first-child{
			border-right: 1px solid @gray;
		}
	}
	#commentModal{
		.commentContainer{
			.commentHeader{
				height: 40px;
				width: 100%;
				background-color: @blue;
				line-height: 40px;
				/* Gecko browsers */
				-moz-border-radius: 5px 5px 0 0; 
				/* Webkit browsers */
				-webkit-border-radius: 5px 5px 0 0; 
				/* W3C syntax - likely to be standard so use for future proofing */
				border-radius:5px 5px 0 0;
				p{
					margin: 0 20px;
					color: white;
					font-size: 15px;
				}
			}
			.commentBody{
				p{
					color:#fd3d3b
				}
				padding: 20px;
				#commentTextarea{
					margin-top:10px;
					.radiusBlock(100%,51px,#ececec,2px);
					border: 1px solid @gray-dark;
					height: 120px;
					outline:none;
					resize:none;
				}
				#publishcommentBtn{
					.button(110px,34px,@blue,white);

					
				}
				#cancelcommentBtn{
					.button(110px,34px,#dfdfdf,#767676);
					margin-right: 10px;
				}
			}

		}

	}
	.StudioComment{
			//触发BFC模型，不会高度塌陷。
			float: left;
			//overflow: auto;	//用overflow会导致box-shadow无法正常显示
			margin-top: 10px;
			width: 100%;

			.left-col{
					float: left;
					position: relative;	//用于子元素绝对定位
					width: 10%;
					height: 0;
					padding-bottom: 10%;
					overflow: hidden;
					.avatarWrapper{
						overflow: hidden;
						float: left;
						width: 77%;
						height: 0;
						padding-bottom: 77%;
						img{
							width: 100%;
						}
					}

					.triangle{
						position: absolute;
						right: 0;
						top: 35%;
						width: 0;
						height: 0;
						border-right: 10px solid #FFF;
						border-top: 10px solid transparent;
						border-bottom: 10px solid transparent;
					}
			}
			.right-col{
					position: relative;
					float: left;
					width: 90%;
					background-color: #FFF;
					.shadow(0px, 3px, 4px, -2px, #9C9C9C);
					padding-bottom: 20px;
					.problem-details{
						word-break:break-all;
						padding: 0 3%;
						h5{
							font: 16px "黑体","宋体",sans-serif;
						}
						h5:first-child{
							color: #3964CF;
							margin-top: 20px;
						}
						h6{
							margin: 0 0 15px 0;
							font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
							color: #8F8F8D;
							white-space: pre;
						}
						.paintings{
							margin-right: -3%;
							img{
								width: 19%;
								margin-right: 1.25%;
							}
							img:last-child{
								margin-right: 0;
							}
						}
						.tags-showAll{
							width: 100%;
							margin: 17px 0 13px 0;
							height: 20px;
							img{
								width: 17px;
							}
							.tags{
								position: relative;
								top: 2px;
								padding: 0 5px;
								font: 15px "黑体","宋体",sans-serif;
								color: #8F8F8D;
							}
							.showAll{
								display: inline-block;
								float: right;
								color: #3964CF;
								font: 17px/20px "黑体","宋体",sans-serif;
								cursor: pointer;
							}	
						}
					}
					.comment{
						position: absolute;
						top: 20px;
						right: 20px;
						color: @blue;
						font-size: 16px;
						cursor: pointer;
					}
					.commentSection{
						.commentSection_head{
							margin: 20px 20px 10px 20px;
							span{
								color: @blue;
							}
							span:first-child{
								
 							}
 							span:last-child{
 								float: right;
								cursor: pointer;
 							}
						}
						.commentContent{
							margin: 0 20px 0 20px;
						
						}
					}
			}
	}
}
/*画材选购*/
#MerchantFrontPage{
	& > p {
		.nothing;
	}
	#MerchantToolBar{
		.radiusBlock(100%,50px,white,2px);
		.shadow(0,1px,2px,1px,@gray-dark);
		margin: 20px 0 10px 0;
		line-height: 50px;
		.sortType{
			height: 50px;
			width: 100px;
			float: left;
			cursor: pointer;
			padding: 0 10px;
			background-image: url("../image/sort.png");
			background-position: 80px 22px;
			background-repeat: no-repeat;
		}
		.sortType.active{
			color:@blue;
		}
		#sortByTime{
			border-right: 1px solid @gray;
		}
		.searchBox{
			#searchInput{
				.radiusBlock(50%,35px,#ececec,10px);
				margin: 5px 20px;
				border: 1px solid @gray-dark;
				line-height: 35px;
				float: right;
			}
			#searchBtn{
				height: 35px;
				width: 110px;
				margin: 5px 20px 5px 0;
				float:right;
			}
		}
	}
	#MerchangtList{
		list-style: none;
		padding: 0px;
		li{
			.radiusBlock(100%,100%,white,2px);
			.shadow(0,1px,2px,1px,@gray-dark);
			.MerchantInfoBox{
				float: left;
				height: 170px;
				width: 19%;
				margin-right: 1.25%;
				img{
					height: 64px;
					width: 64px;
				}
				
			}
			.GoodsBox{
				img{
					width: 19%;
					margin-right: 1.25%;
				}
				img:last-child{
					margin-right: 0;
				}
			}
			padding: 20px;
			margin-top:10px;
		}
	}
}
#MerchantDetailPage{
	.breadcrumb{
		list-style: none;
		padding: 0;
		li{
			display: inline;
			color: @blue;
			cursor: pointer;
		}
		.withDivider:after{
			content: ">"
		}
	}
	#MerchantDetailInfoBox{
		position: relative;
		.radiusBlock(100%,170px,white,2px);
		.shadow(0,1px,2px,1px,@gray-dark);
		padding: 20px;
		.InfoBoxhead{
			img{
				height: 60px;
				width: 60px;
				float: left;
			}
			.InfoBoxhead_text{
				width: 80%;
				height: 60px;
				float: left;
			}
/*			h4{
				display: inline;
			}*/
			#tips{
				position: absolute;
				top: 0;
				right: 0;
				.block(160px,30px,#768ae6);
				color: white;
				line-height: 30px;
			}

		}
		.InfoBoxhead:after{
			.clearFloatAfter();
		}
	}
	#MerchantDetailToolBar{
		.radiusBlock(100%,50px,white,2px);
		.shadow(0,1px,2px,1px,@gray-dark);
		margin: 10px 0 10px 0;
		line-height: 50px;
		.goodsFilter{
			height: 50px;
			width: 100px;
			float: left;
			cursor: pointer;
			padding: 0 10px;
		}
		#newestGoods{
			border-right: 1px solid @gray;
		}
	}
	#GoodsTable{
		.radiusBlock(100%,100%,white,2px);
		.shadow(0,1px,2px,1px,@gray-dark);
		padding: 20px;
		.GoodsRow{
			.singleGood{
				padding: 5px;
				float: left;
				width: 19%;
				margin-right: 1.25%;
				img{
					width: 100%;
					
				}
				.discountPrice{

					float: left;
					color: @blue;
				}
				.originalPrice{
					float: right;
				}
				.goodTitle{
					text-align:center;
					margin: 40px 0 0 0;
					padding: 0;
				}
			}
			.singleGood:last-child{
				margin-right: 0;
			}
		}

	}
	#GoodsTable:after{
		.clearFloatAfter;
	}
}
/*商品详情*/
#GoodDetailPage{
	.big_img_good{
		width: 100%;
	}
	.breadcrumb{
		list-style: none;
		padding: 0;
		li{
			display: inline;
			color: @blue;
			cursor: pointer;
		}
		.withDivider:after{
			content: ">"
		}
	}
	#GoodDetailInfoBox{
		.radiusBlock(100%,100%,white,3px);
		.shadow(0,1px,2px,1px,@gray-dark);
		position: relative;
		padding: 20px;
		margin: 10px 0;
		#carouselContainer{
			position: relative;
			float: left;
			#GoodImageCarousel{
				width: 256px;
				height: 256px;
				.item{
					img{
						width: 256px;
						height: 256px;
					}
				}
			}
			.carouselControl{
				.prevSlide{
					position: absolute;
					bottom: 22px;
					left: 0;
				}
				.nextSlide{
					position: absolute;
					bottom: 22px;
					right: 0;
				}
				.indicator{
					list-style: none;
					padding: 0;
					li{
						float: left;
						img{
							width: 64px;
							height: 64px;
						}
					}
				}
				.indicator:after{
					.clearFloatAfter;
				}
			}
		}
		#GoodDetailText{
			margin-left: 20px;
			width: 60%;
			float: left;
			#GoodDetailText_section1{
				.discountPrice{
					color: @blue;
				}
				.originalPrice{
					color: #b2b2b2;
					font-size: 18px;
				}

				#merchantCard{
					position: absolute;
					top:40px;
					right: 30px;
					.merchantAvatar{
						height: 60px;
						width: 60px;
						float: left;
					}
					div{
						float: left;
					}
				}
			}

			.goodDescription{
				color: #1e1e1e;
			}
		}
		.floatleft{
			float: left;
		}
		.floatright{
			float: right;
		}
		#tips{
			position: absolute;
			top: 0;
			right: 0;
			.block(160px,30px,#768ae6);
			color: white;
			line-height: 30px;
		}

	}
	#GoodDetailInfoBox:after{
		.clearFloatAfter;
	}

}

/*教师队伍*/
.teacherToolBar{
	width: 100%;
	height: 30px;
	line-height: 30px;
	.addTeacher{
		float: right;
		text-decoration: none;
	}
}

.TeacherList{
	width: 100%;
	list-style: none;
	padding: 0;
	.radiusBlock(100%,100%,white,3px);
	.shadow(0,1px,2px,1px,@gray-dark);
	margin: 0 auto;

	li {
		.nothing;
	}
}
.TeacherItem{
	display: block;
	width: 100%;
	height: 130px;
	padding: 20px;
	img{
		float: left;
		width: 90px;
		height: 90px;
		margin-right: 10px;
	}
	a{
		float: right;
		text-decoration: none;
	}
	border-bottom:solid 1px @gray-dark;

}
.TeacherItem:after{
		clear: both;
	}
.addTeacherContainer{
	height: 250px;
	padding: 20px;
	.addTeacherInputContainer{
		width: 70%;
		margin: 0 auto;
		line-height: 50px;
		label{
			float: left;
			text-align: center;
		}
		input{
			.radiusBlock(340px,50px,@gray,5px);
			border: solid 1px @gray-dark;
			margin-bottom: 10px;
			float: right;
		}
	}
	.addTeacherInputContainer:after{
		.clearFloatAfter;
	}
	.addTeacherActionBtns{
		width: 230px;
		margin: 20px auto;
		button{
			float: right;
			margin-left:5px;
		}
		#addTeacherBtn{
			.button(110px,34px,@blue,white);
		}
		#cancelAddTeacherBtn{
			.button(110px,34px,#dfdfdf,#767676);
			border: solid 1px #bfbfbf;
		}
	}

}
/***************************登陆页***************************/
#bg{
	background-image: url(../image/loginBg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	float: left;
	z-index: 0;
}
.loginBox{
    position: relative;
    z-index: 5;
    .radiusBlock(340px,100%,white,10px);
    .shadow(0,1px,2px,1px,@gray-dark);
    padding: 30px 30px 40px 30px;
    margin: 100px auto;
    background-color: rgba(255,255,255,0.9);
    .loginInput{
        .radiusBlock(280px,50px,@gray,5px);
        border: solid 1px @gray-dark;
        margin-bottom: 10px;
        padding-left: 50px;
    }
    #userNameInput{
        margin: 20px 0;
        background-image: url(../image/email.png);
        background-repeat: no-repeat;
        background-position: 18px 18px;
    }
    #passWordInput{
        background-image: url(../image/password.png);
        background-repeat: no-repeat;
        background-position: 18px 12px;
    }
    #rememberPW {   
        text-align: right;
    }
    #loginError{
        color: red;
        float: left;
    }
    .loginBtn{
        width: 280px;
        height: 50px;
        background-image: url(../image/loginBtn.png);
        margin: 10px auto 20px auto;
        &:hover {  
            cursor:pointer;
        }
    }
    #registerBtn {
        text-decoration: none;
        color: @blue;
        float: right;
    }
    #forgetBtn {
        text-decoration: none;
        color: @blue;
        float: left;
    }
    #logo { 
        text-align: center;
        h3 {    
            display: inline;
            vertical-align: middle;
            margin-left: 10px;
        }
    }
}

.whiteBox { 
    position: relative;
    z-index: 5;
    .radiusBlock(90%,100%,white,10px);
    .shadow(0,1px,2px,1px,@gray-dark);
    padding:30px;
    margin: 100px auto;
    #userNameInput{
        .radiusBlock(280px,50px,@gray,5px);
        border: solid 1px @gray-dark;
        padding-left: 50px;
        background-image: url(../image/email.png);
        background-repeat: no-repeat;
        background-position: 18px 18px;
        margin: auto;
        margin-bottom: 10px;
        display: block;
    }
    #sendError, #error{
        color: red;
        text-align: center;
    }
    .msg {  
        width: 43%;
        font-size: 15px;
        margin: 100px auto 50px auto;
    }
    #sendEmailBtn {
        width: 280px;
        height: 50px;
        background-image: url(../image/发送邮件.png);
        margin: 30px auto 100px auto;
        &:hover {  
            cursor:pointer;
        }
    }
    #sendSuccess {  
        margin: 100px 0 100px 35%;
        img {    
            float: left;
            position: relative;
            right: 20px;
            bottom: 12px;
        }
    }
    #resetSuccess { 
        margin: 100px 0 100px 40%;
        img {    
            float: left;
            position: relative;
            right: 20px;
            bottom: 25px;
        }
    }
    #enterLoginBtn {    
        display: block;
        width: 280px;
        height: 50px;
        background-image: url(../image/立即登录美术帮.png);
        margin: 30px auto 100px auto;
        &:hover {  
            cursor:pointer;
        }
    }
    #enterEmailBtn { 
        width: 280px;
        height: 50px;
        background-image: url(../image/登录邮箱.png);
        margin: 30px auto 100px auto;
        &:hover {  
            cursor:pointer;
        }
    }
    .Input{
        .radiusBlock(280px,50px,@gray,5px);
        border: solid 1px @gray-dark;
        margin-bottom: 10px;
        padding-left: 10px;
    }
    .confirmBtn {   
        width: 178px;
        height: 50px;
        background-image: url(../image/确认.png);
        margin: 30px auto 100px auto;
        &:hover {  
            cursor:pointer;
        }
    }
    .inputGroup {   
        display: block;
        text-align: center;
        margin: 20px;
        label { 
            margin-right: 10px;
            font-size: 16px;
        }
    }
    #resetSuccess { 

    }
}

#content:after{
	.clearFloatAfter;
}
/*footer*/
.footer{
	.block(100%,170px,white);
	margin-top: 20px;
	padding:20px;
	border-top: 2px solid @gray-dark;
	.footerContent{
		width: 80%;
		height: 130px;
		position: relative;
		margin: 0 auto;
		.footerList{
			list-style: none;
			padding: 0;
			float: left;
			li{
				margin: 10px 0;
			}	
		}
		.icp{
			color: @dark-gray; 
			position: absolute;
			bottom: 0;
			left: 0;
		}
		h2{
			color: @blue;
			position: absolute;
			bottom: 0px;
			right: 0px;
		}

	}

}
/*选择城市插件*/
.cityModalDialog{
	width: 1000px;
}
.selectCityContainer{
	DIV {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}
	DL {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}
	DT {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}
	DD {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}
	UL {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}
	OL {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}
	LI {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}
	H1 {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}
	H2 {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}

	P {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}

	LI {
		LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none
	}

	H2 {
		FONT-SIZE: 100%
	}

	#change-city{width:1000px; margin:0 auto;}
	#change-city .choosecities {
		BORDER-BOTTOM: #a3d7df 1px solid; BORDER-LEFT: #a3d7df 1px solid; PADDING-BOTTOM: 60px; BACKGROUND: #fff; BORDER-TOP: #a3d7df 1px solid; BORDER-RIGHT: #a3d7df 1px solid; box-shadow: 0 0 1px #d4edf4
	}
	#change-city .choosecities A:hover {
		TEXT-DECORATION: none
	}
	#change-city .citieslist LI {
		BORDER-BOTTOM: #fff 1px solid; BORDER-TOP: #fff 1px solid
	}
	#change-city .citieslist LI:hover{
		BORDER-BOTTOM-COLOR: #e5e5e5; BORDER-TOP-COLOR: #e5e5e5; BORDER-RIGHT-COLOR: #e5e5e5; BORDER-LEFT-COLOR: #e5e5e5
	}
	#change-city .citieslist P {
		BORDER-BOTTOM: #fff 1px solid; PADDING-BOTTOM: 6px; PADDING-LEFT: 30px; PADDING-RIGHT: 10px; BORDER-TOP: #fff 1px solid; PADDING-TOP: 6px
	}
	.popularCity_recently{
		line-height: 50px;
		.my_label{
			margin-left: 30px;
			LINE-HEIGHT: 24px; 
			 DISPLAY: inline;
			 COLOR: #666; 
			 VERTICAL-ALIGN: top; 
			strong{
				TEXT-ALIGN: center; 
				DISPLAY: inline; 
				FONT-FAMILY: "黑体";
				FONT-SIZE: 14px; 
			}
		}
	}

	#change-city .citieslist SPAN.label {
		BORDER-BOTTOM: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; LINE-HEIGHT: 24px; WIDTH: 30px; ZOOM: 1; DISPLAY: inline-block; HEIGHT: 30px; COLOR: #666; VERTICAL-ALIGN: top; BORDER-TOP: #ddd 1px solid; MARGIN-RIGHT: 5px; BORDER-RIGHT: #ddd 1px solid; border-radius: 0
	}
	#change-city .citieslist SPAN.label STRONG {
		BORDER-BOTTOM: #f7f7f7 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #f7f7f7 1px solid; WIDTH: 28px; DISPLAY: block; FONT-FAMILY: Tahoma; BACKGROUND: #f1f1f1; HEIGHT: 28px; FONT-SIZE: 16px; BORDER-TOP: #f7f7f7 1px solid; BORDER-RIGHT: #f7f7f7 1px solid; border-radius: 0
	}
	#change-city .citieslist SPAN {
		WIDTH: 880px; ZOOM: 1; DISPLAY: inline-block; VERTICAL-ALIGN: top
	}
	#change-city .citieslist SPAN I {
		FONT-STYLE: normal; MARGIN: 0px 3px; COLOR: #ccc
	}
	#change-city .citieslist .hover {
		BORDER-BOTTOM-COLOR: #e5e5e5; BORDER-TOP-COLOR: #e5e5e5; BORDER-RIGHT-COLOR: #e5e5e5; BORDER-LEFT-COLOR: #e5e5e5
	}
	#change-city .citieslist .hover P {
		BACKGROUND: #f7f7f7
	}
	#change-city .citieslist .hover SPAN.label {
		BORDER-BOTTOM-COLOR: #1fb7bb; BORDER-TOP-COLOR: #1fb7bb; BORDER-RIGHT-COLOR: #1fb7bb; BORDER-LEFT-COLOR: #1fb7bb
	}
	#change-city .citieslist .hover SPAN.label STRONG {
		BORDER-BOTTOM-COLOR: #00c7c7; BORDER-TOP-COLOR: #00c7c7; BACKGROUND: #00c7c7; COLOR: #fff; BORDER-RIGHT-COLOR: #00c7c7; BORDER-LEFT-COLOR: #00c7c7
	}
	#change-city .citieslist A {
		
		PADDING-BOTTOM: 1px; LINE-HEIGHT: 20px; MARGIN: 5px 10px; PADDING: 5px 10px;  ZOOM: 1; DISPLAY: inline-block; HEIGHT: 20px;  border-radius: 0
	}
	#change-city .citieslist A:hover {
		BACKGROUND: #00c7c7; COLOR: #fff
	}
	#change-city .citieslist .isonline {
		height: 30px;
		FONT-WEIGHT: bold
	}
	#change-city .citieslist .isoffline {
		height: 30px;
		FONT-WEIGHT: bold
	}
	#bdw {
		MIN-HEIGHT: 500px
	}
	.cf {
		ZOOM: 1
	}
	.cf:after {
		DISPLAY: block; HEIGHT: 0px; VISIBILITY: hidden; CLEAR: both; OVERFLOW: hidden; CONTENT: ''
	}
	H2 {
		PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
	}

	A {
		COLOR: #399; TEXT-DECORATION: none
	}
	A:hover {
		TEXT-DECORATION: underline
	}
}

/*froala editor*/
.froala-view {
    min-height: 320px;
    overflow: scroll;
}
.froala-box {
	position: static!important;
}